import React, { Component } from 'react'
import { Card, Table } from 'antd'
import Axios from '../../axios'
export default class Tables extends Component {
  componentWillMount() {
    Axios.ajax({
      url: '/user'
    }).then(res => {
      let userList = res.userList.map((item, index) => {
        item.key = index
        return item
      })
      this.setState({
        userList,
        selectedRowKeys: []
      })
    })
  }
  handleChange = (record, index) => {
    this.setState({
      selectedRowKeys: [index]
    })
  }
  handleMultiChange = (record, index) => {
    console.log(record)
    console.log(index)
  }
  onSelectChange = (selectedRowKeys, selectedRows) => {
    console.log(selectedRowKeys)
    console.log(selectedRows)
  }
  state = {
    userList: []
  }
  pageOnchange = (e) => {
    console.log(e)

  }
  render() {
    const dataSource = [
      {
        id: '1',
        name: '胡彦斌',
        sex: 2,
        age: 32,
        isMarried: 1,
        address: '西湖区湖底公园1号'
      },
      {
        id: '2',
        name: '胡彦祖',
        sex: 1,
        age: 42,
        isMarried: 1,
        address: '西湖区湖底公园1号'
      },
      {
        id: '3',
        name: '王祖蓝',
        sex: 2,
        age: 42,
        isMarried: 2,
        address: '西湖区湖底公园1号'
      },
      {
        id: '4',
        name: '王祖红',
        sex: 1,
        age: 42,
        isMarried: 2,
        address: '西湖区湖底公园1号'
      }
    ]

    const columns = [
      {
        title: 'ID',
        dataIndex: 'id',
        key: 'id'
      },
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name'
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age'
      },
      {
        title: '性别',
        dataIndex: 'sex',
        key: 'sex',
        render(data) {
          return data === 1 ? '男' : '女'
        }
      },
      {
        title: '是否已婚',
        dataIndex: 'isMarried',
        key: 'isMarried',
        render(data) {
          return data === 1 ? '未婚' : '已婚'
        }
      },
      {
        title: '住址',
        dataIndex: 'address',
        key: 'address'
      }
    ]

    const rowSelection = {
      type: 'radio',
      selectedRowKeys: this.state.selectedRowKeys
    }

    const rowMultiSelection = {
      type: 'checkbox',
      onChange: this.onSelectChange
    }

    return (
      <div>
        <Card title="基础表格">
          <Table
            rowKey="id"
            bordered
            dataSource={dataSource}
            columns={columns}
            pagination={false}
          />
        </Card>
        <Card title="Mock表格" style={{ margin: '10px 0' }}>
          <Table
            rowKey="id"
            dataSource={this.state.userList}
            bordered
            columns={columns}
            pagination={false}
          />
        </Card>
        <Card title="Mock表格-单选" style={{ margin: '10px 0' }}>
          <Table
            dataSource={this.state.userList}
            bordered
            onRow={(record, index) => {
              return {
                onClick: () => {
                  this.handleChange(record, index)
                }
              }
            }}
            rowSelection={rowSelection}
            columns={columns}
            pagination={false}
          />
        </Card>
        <Card title="Mock表格-多选" style={{ margin: '10px 0' }}>
          <Table
            dataSource={this.state.userList}
            bordered
            onRow={(record, index) => {
              return {
                onClick: () => {
                  this.handleMultiChange(record, index)
                }
              }
            }}
            rowSelection={rowMultiSelection}
            columns={columns}
            pagination={false}
          />
        </Card>
        <Card title="Mock表格-分页" style={{ margin: '10px 0' }}>
          <Table
            dataSource={this.state.userList}
            bordered
            onRow={(record, index) => {
              return {
                onClick: () => {
                  this.handleMultiChange(record, index)
                }
              }
            }}
            rowSelection={rowMultiSelection}
            columns={columns}
            onChange={this.pageOnchange}
            pagination={{
              current: 1,
              total: 50
            }}
          />
        </Card>
      </div>
    )
  }
}
